<template>
  <div class="op-container">
    <div class="filter-container">
      <span v-if="authorityHandle(192)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(192)"
        v-model="listQuery.userType"
        style="width:100px"
        class="filter-item right-item"
        :select-params="typeList"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">注销状态</span>
      <k-select
        v-model="listQuery.cancelStatus"
        style="width:120px"
        class="filter-item user-status"
        :select-params="[{label:'注销中',value: 1}, {label:'已注销',value: 2}, {label:'已取消',value: 3}]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">注册时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="handleFilter" />
      <span class="filter-title filter-item">提交时间</span>
      <k-date-picker v-model="timeValueGet" class="filter-item" @hqchang="handleFilter" />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="请输入关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>

    <k-button class="top-btn" value="注销协议" @click.native="ruleGuideDialog" />

    <!--表格相关 -->
    <el-table
      :data="listData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column prop="userNickName" min-width="100px" label="昵称" align="center" />
      <el-table-column prop="userMobile" min-width="120px" label="绑定手机号" align="center" />

      <el-table-column prop="belongName" min-width="180px" label="身份所属" align="center" />

      <el-table-column prop="userRechargeTotal" min-width="100px" label="消费总额" align="center" />
      <el-table-column
        v-if="authorityHandle(192)"
        prop="userDrawTotal"
        min-width="100px"
        label="提取总额"
        show-overflow-tooltip
        align="center"
      />

      <el-table-column prop="userCreateTime" min-width="150px" label="注册时间" align="center" />
      <el-table-column prop="cancelMsg" min-width="130px" label="注销原因" show-overflow-tooltip align="center" />
      <el-table-column prop="cancelTime" min-width="150px" label="提交时间" align="center" />
      <el-table-column prop="cancelStatus" min-width="130px" label="注销状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.cancelStatus | cancellation }}
        </template>
      </el-table-column>

      <el-table-column v-if="authorityHandle(192)" prop="userSescribe" min-width="120px" label="备注" align="center">
        <editable-cell
          v-model="row.userSescribe"
          slot-scope="{row}"
          :tool-tip-content="row.userSescribe ? row.userSescribe : '点击编辑,编辑完成回车'"
          :show-input="row.editMode"
          @blur="blurInput(row)"
          @keyup.enter.native="$event.target.blur()"
        >
          <span
            slot="content"
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              "
          >{{ row.userSescribe }}</span>
        </editable-cell>
      </el-table-column>

      <el-table-column v-else prop="userSescribe" min-width="120px" label="备注" align="center" show-overflow-tooltip />

      <el-table-column min-width="130px" label="再次注册" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.allowReg"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="允许"
            inactive-text="禁止"
            :active-value="1"
            :inactive-value="2"
            :disabled="!authorityHandle(192)"
            @change="updateTimingStatus($event,scope)"
          />
        </template>
      </el-table-column>

      <el-table-column min-width="150px" fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="修改/详情" @click.native="userUpdateDialog(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

    <!-- 修改、详情 弹窗 -->
    <k-dialog
      :show-hide.sync="modifyDialog.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="修改/详情"
      :show-foot="false"
      :two-btn="false"
      @click="updateUserData"
    >
      <el-form :model="userinfo" label-width="auto" class="form-modify">
        <div class="modify-left">
          <el-form-item label="昵称：">
            <el-input v-model="userinfo.userNickName" readonly />
          </el-form-item>
          <el-form-item label="绑定手机号：">
            <el-input v-model="userinfo.userMobile" readonly onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </el-form-item>

          <el-form-item label="用户等级：">
            <el-input v-model="userinfo.userLevel" readonly />
          </el-form-item>

          <el-form-item label="用户等级值：">
            <el-input v-model="userinfo.userUpdateRechargeTotal" readonly />
          </el-form-item>

          <el-form-item label="绑定邮箱：">
            <el-input v-model="userinfo.userEmail" readonly />
          </el-form-item>
          <el-form-item label="绑定 Steam：">
            <el-input v-model="userinfo.userSteamId" readonly />
          </el-form-item>
          <el-form-item label="交易链接：">
            <el-input v-model="userinfo.userSteamUrl" readonly />
          </el-form-item>

          <el-form-item label="身份所属：">
            <el-input v-model="userinfo.belongName" readonly />
          </el-form-item>

          <el-form-item label="邀请码：">
            <el-input v-model="userinfo.userInvitationCode" readonly />
          </el-form-item>

          <el-form-item label="自己邀请码：" prop="owninvitecode">
            <el-input v-model="userinfo.userOwnerInvitation" readonly />
          </el-form-item>

          <el-form-item v-if="authorityHandle(1)" label="用户通道：">
            <el-select v-model="userinfo.userCaseProbability" disabled>
              <el-option
                v-for="item in dict.USER_CHANNEL"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

        </div>
        <div class="modify-right">
          <el-form-item label="真实姓名：">
            <el-input v-model="userinfo.userName" readonly />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="userinfo.userIdNumber" readonly />
          </el-form-item>

          <el-form-item label="账号余额：">
            <div class="account_balance">
              <el-input v-model="userinfo.userAccountBalance" readonly />
            </div>
          </el-form-item>

          <el-form-item label="饰品余额：">
            <div class="account_balance">
              <el-input v-model="userinfo.userRucksackTotal" readonly />
            </div>
          </el-form-item>

          <el-form-item label="晶粹数量：">
            <div class="account_balance">
              <el-input v-model="userinfo.userAmmoBalance" readonly />
            </div>
          </el-form-item>
          <el-form-item label="积分数量：">
            <div class="account_balance">
              <el-input v-model="userinfo.userPointBalance" readonly />
            </div>
          </el-form-item>

          <el-form-item label="未开奖roll房：">
            <div class="account_balance">
              <el-tooltip class="item" effect="dark" :content="userinfo.userRollMsg" placement="top">
                <el-input v-model="userinfo.userRollMsg" readonly />
              </el-tooltip>
            </div>
          </el-form-item>

          <el-form-item label="推广盲盒：">
            <div class="account_balance">
              <el-input v-model="userinfo.userFissionBoxCount" readonly />
            </div>
          </el-form-item>

          <el-form-item label="推广分红：">
            <div class="account_balance">
              <el-input v-model="userinfo.userFissionTotal" readonly />
            </div>
          </el-form-item>

          <el-form-item label="礼品余额：">
            <div class="account_balance">
              <el-input v-model="userinfo.userTaskTotal" readonly />
            </div>
          </el-form-item>

          <el-form-item label="注销原因：">
            <div class="account_balance">
              <el-tooltip class="item" effect="dark" :content="userinfo.cancelMsg" placement="top">
                <el-input v-model="userinfo.cancelMsg" readonly />
              </el-tooltip>
            </div>
          </el-form-item>

        </div>
      </el-form>
    </k-dialog>

    <!-- 玩法介绍 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="注销协议"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="authorityHandle(192)"
      @click="guideSave"
    >
      <div class="dialog-ruleGuide" style="padding:30px">
        <el-form :model="ruleGuideContent" label-width="auto">
          <el-form-item label="内容介绍：" prop="content">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="ruleGuideContent.content"
              :options="editorOption"
              class="editer"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import EditableCell from '@/components/EditableCell'

import {
  cancelUserListData,
  cancelUserUpdateStatus,
  updateRemark,
  getCanceAgreement,
  setCanceAgreement
} from '@/api/user/user'

export default {
  components: {
    Pagination,
    EditableCell
  },

  filters: {
    identity(v) {
      if (v == 1) {
        return '官方'
      } else if (v == 2) {
        return '主播'
      } else if (v == 3) {
        return '玩家'
      }
    },

    cancellation(v) {
      if (v == 1) {
        return '注销中'
      } else if (v == 2) {
        return '已注销'
      } else if (v == 3) {
        return '已取消'
      }
    }

  },
  dicts: ['USER_CHANNEL'],
  data() {
    return {
      typeList: [{
        label: '官方',
        value: 1
      }, {
        label: '主播',
        value: 2
      }, {
        label: '玩家',
        value: 3
      }],
      listData: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: '',
          startTime: ''
        },
        startTime: '', // 用户创建时间
        endTime: '', // 结束时间
        cancelStartTime: '', // 提交时间
        cancelEndTime: '', // 提交结束时间
        userType: '', // 用户类型 1官网 2主笔 3玩家
        cancelStatus: '', // 注销状态 1注销中|2已注销|3已取消
        key: '' // 搜索
      },
      probilityModle: undefined,
      userinfo: {},

      timeValue: '',
      timeValueGet: '',
      identityBelong: '',

      modifyDialog: {
        showHide: false
      },

      ruleGuide: {
        showHide: false
      },
      ruleGuideContent: {
        content: ''
      },
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  watch: {
    identityBelong(val) {
      this.$log(val)
      this.listQuery.identityBelong = this.identityBelong
      if (val) {
        this.getByIdentityBelong(val)
      }
    },
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    },

    timeValueGet(val) {
      this.listQuery.cancelStartTime = this.timeValueGet ? this.timeValueGet[0] : null
      this.listQuery.cancelEndTime = this.timeValueGet ? this.timeValueGet[1] : null
    }
  },

  created() {
    if (this.authorityHandle(188, 189, 190, false)) {
      this.typeList = [{
        label: '主播',
        value: 2
      }]
    }
    this.loadData()
  },

  methods: {
    ruleGuideDialog() {
      getCanceAgreement().then(res => {
        this.ruleGuideContent.content = res.data.data.content
        this.ruleGuide.showHide = true
      })
    },

    // 保存玩法管理
    guideSave() {
      const contents = this.ruleGuideContent.content
      setCanceAgreement({ 'content': contents }).then(res => {
        this.ruleGuide.showHide = false
      })
    },

    loadData(val) {
      cancelUserListData(this.listQuery).then(res => {
        const data = res.data
        // this.listData = data.rows
        this.totalRows = data.totalRows
        if (data.rows) {
          this.listData = data.rows.map(row => {
            return {
              ...row,
              editMode: false
            }
          })
        } else {
          this.listData = []
        }
      })
    },

    // 状态
    updateTimingStatus(event, scope) {
      cancelUserUpdateStatus({
        'id': scope.row.id,
        'allowReg': scope.row.allowReg
      }).then(res => {
        if (res.data.success) {
          this.$message.success('操作成功')
        } else {
          this.$message.success(res.data.msg)
        }
      })
    },

    // 修改用户信息
    updateUserData() {
      this.modifyDialog.showHide = false
    },

    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },

    userUpdateDialog(row) {
      this.userinfo = row
      this.modifyDialog.showHide = true
    },

    blurInput(row) {
      this.modifyItemNote(row)
    },
    // 修改备注
    modifyItemNote(row) {
      // if (!row.describe) return
      updateRemark({
        userId: row.userId,
        userDescribe: row.userSescribe
      }).then(res => {
        if (res.data.success) {
          this.$message.success('备注成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }

}
</script>
  <style lang="scss" scoped>
      $menuText:#14162E; // 侧边栏字体颜色
      $hoverColor:#1D143C; // 鼠标停留主色调浅色
      $mainColor:#3b425d; // 主色调

      .op-container {
          margin: 20px;
      }

  .editer {
    width: 500px;
    border-radius: 8px;
    float: left;
    box-sizing: border-box;
    color: #606266;
    ::v-deep .ql-container {
      height: 270px;
      border-radius: 0px 0px 8px 8px;
    }
    ::v-deep .ql-toolbar.ql-snow {
      border-radius: 8px 8px 0px 0px;
    }
  }

      .filter-container {
          width: 100%;
          height: 48px;
          line-height: 48px;

          .filter-item {
              display: inline-block;
              vertical-align: middle;
              margin-bottom: 10px;
          }

          .right-item {
              margin-right: 10px;
          }

          .kInput {
              position: absolute;
              right: 10px;
          }

          .filter-title {
              height: 48px;
              line-height: 48px;
              font-size: 16px;
              font-weight: 500;
              margin-right: 6px;
              color: #14162E;
          }

          .user-item {
              margin-left: 10px;
              margin-right: 20px;
          }

          .user-status,
          .account-status {
              margin-right: 20px;
          }
      }

      .top-btn {
          margin: 30px 0px 30px 0px;
          font-size: 14px;
          color: #ffffff;
      }

      .balance_btn {
          margin: 0px 10px;
          font-size: 14px;
          color: #ffffff;
      }

      .account_balance {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
      }

      .top-radio-group {
          margin-bottom: 40px;
          transform: translateY(-20px);
      }

      ::v-deep .el-radio-button__inner {
          &:hover {
              color: $mainColor;
          }
      }

      .supervise-container {
          min-width: 1320px;
          min-height: 300px;

          .percentage_box {
              width: 100%;
              height: 100%;
              overflow: hidden;

              p {
                  text-align: center;
                  font-size: 16px;
                  margin-top: 40px;
              }

              .el-input {
                  width: 80px;
                  margin: 0 6px;
              }
          }

          .allocation_box {
              width: 100%;
              text-align: center;
              transform: translateY(-20px);
              padding: 0 20px;
              box-sizing: border-box;

              .allocation_main {
                  display: flex;
                  justify-content: space-between;

                  .title {
                      font-size: 20px;
                      text-align: center;
                      margin-bottom: 20px;
                  }

                  .allocation_left {
                      height: 100%;
                      width: 600px;
                      border-right: 2px solid #606266;
                      padding-right: 50px;
                      box-sizing: border-box;

                      .section_list {
                          .section_item {
                              display: flex;
                              align-items: center;
                              padding: 10px 20px;
                              box-sizing: border-box;
                              border: 1px solid transparent;
                              border-radius: 6px;
                              cursor: pointer;

                              span {
                                  font-size: 16px;
                              }

                              .el-input {
                                  width: 140px;
                                  margin: 0 20px;
                              }

                              i {
                                  font-size: 18px;
                                  cursor: pointer;
                              }

                              &.active {
                                  border-color: rgb(54, 181, 139);
                              }
                          }

                      }

                      .addItem {
                          text-align: center;
                          margin-top: 20px;

                          i {
                              font-size: 22px;
                              color: rgb(54, 181, 139);
                              cursor: pointer;
                          }
                      }

                  }

                  .allocation_right {
                      height: 100%;
                      width: 640px;

                      .enter_list {
                          .enter_item {
                              display: flex;
                              align-items: center;
                              margin-bottom: 20px;

                              span {
                                  font-size: 16px;
                              }

                              .el-input {
                                  width: 120px;
                                  margin: 0 6px;
                              }

                              .item {
                                  margin: 0 10px;

                                  .el-select {
                                      width: 120px;
                                      margin: 0 6px;
                                  }
                              }

                              i {
                                  font-size: 18px;
                                  cursor: pointer;
                              }
                          }
                      }

                      .addItem {
                          text-align: center;
                          margin-top: 20px;

                          i {
                              font-size: 22px;
                              color: rgb(54, 181, 139);
                              cursor: pointer;
                          }
                      }

                  }
              }

              li {
                  list-style: none;
                  display: block;
                  display: flex;
                  align-items: center;
                  margin-bottom: 20px;

                  .allocation_item {
                      margin-right: 30px;

                      ::v-deep input::-webkit-outer-spin-button,
                      ::v-deep input::-webkit-inner-spin-button {
                          -webkit-appearance: none;
                      }

                      ::v-deep input[type="number"] {
                          -moz-appearance: textfield;
                      }
                  }

                  .el-input {
                      width: 80px;
                      margin: 0 6px;
                  }

                  .el-select {
                      width: 124px;
                      margin-left: 6px;
                  }

                  .el-icon {

                      &-circle-plus,
                      &-remove {
                          font-size: 22px;
                          color: #3b425d;
                          margin-left: 10px;
                      }
                  }
              }
          }
      }

      .kSelect .el-select .el-input .el-input__inner {
          width: 124px;
      }

      ::v-deep .el-select .el-input.is-focus .el-input__inner {
          border-color: $mainColor;
      }

      ::v-deep .el-input__inner:focus {
          border-color: $mainColor;
      }

      .el-form-item__label-wrap .el-form-item__label {
          float: none;
      }

      .dialog-openboxsetting {
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin: 80px 80px;
      }

      .form-modify {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin: 10px 80px;

          .modify-right {
              margin-left: 80px;
          }
      }

      .table-btn {
          width: 80px;
          height: 35px;
          line-height: 35px;
          padding: 0;
          background: #e7ecf8;
          border: 1px solid $mainColor;
          border-radius: 8px;
          font-size: 14px;
          color: $mainColor;

          &:hover {
              background: $mainColor;
              color: #fff;
          }

          &:focus {
              background-color: #e7ecf8;
          }
      }

      .dialog-warningSetting {
          ::v-deep.el-input {
              width: 150px;
          }

          .price-input {
              width: 110px;
          }

          .el-icon {

              &-circle-plus,
              &-remove {
                  font-size: 22px;
                  color: #3b425d;
                  margin-left: 10px;
              }
          }

          ul {
              list-style-type: none;
              margin: 0;
              padding: 0;

              li {
                  margin: 0 0 30px 0px;
                  display: flex;
                  flex-direction: row;
                  align-items: center;

                  .warning-title {
                      font-size: 16px;
                      color: $menuText;
                      margin-right: 10px;
                      margin-left: 20px;
                  }

                  i {
                      color: #D1D5DD;
                  }
              }
          }
      }

      .kol-router {
          color: #3b425d;
          font-size: 14px;
      }

      .avatardiv {
          width: 50px;
          height: 50px;
          position: relative;

          .image1 {
              position: absolute;
              top: 0;
              left: 0;
              width: 50px;
              height: 50px;
          }

          .image2 {
              z-index: 10;
          }
      }
  </style>

